<template>
  <div class="payslip-detail page-miH page-bgBack" style="padding:0 0 24px 0;">
    <PageHeader @back="goBack" subTitle="返回">
      工资条发放详情
    </PageHeader>

    <a-row type="flex" align="middle" class="top" style="padding:0 24px 0 24px">
      <a-col class="full">
        <a-tabs default-active-key="0" @change="changeTab">
          <a-tab-pane key="0" :tab="`已发放${tabs.sendCount}人`">
            <payslipProvide />
          </a-tab-pane>
          <a-tab-pane key="1" :tab="`待发放${tabs.unSendCount}人`">
            <payslipWaitProvide />
          </a-tab-pane>
          <!-- <a-tab-pane key="2" :tab="`问题反馈${tabs.feedbackCount}人`" /> -->
          <a-tab-pane key="3" :tab="`发放记录`">
            <payslipHistory />
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col v-if="hide" class="mg_t6 pos">
        <a-button v-if="false" @click="statistics">查看统计分析</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "PayslipDetail",
  components: {
    payslipProvide: () => import("./payslip-provide"),
    payslipWaitProvide: () => import("./payslip-wait-provide"),
    payslipHistory: () => import("./payslip-history")
  },

  data() {
    return {
      tabs: {
        feedbackCount: 0,
        sendCount: 0,
        unSendCount: 0
      },
      hide: true
    };
  },
  computed: {
    ...mapState(["hr"])
  },

  created() {
    this.tabsCount();
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.hide = window.screenWidth > 1080;
      })();
    };
  },
  methods: {
    goBack() {
      this.$router.push("/wages/payslip");
    },
    // tabs数量
    tabsCount() {
      this.$request({
        url: "/hr/api/v1/salaryBillSends/salaryBillSendDetailTab",
        params: {
          tableId: this.$route.query.tableId,
          companyId: this.hr.companyId
        }
      }).then(({ data }) => {
        this.tabs.feedbackCount = data.feedbackCount;
        this.tabs.sendCount = data.sendCount;
        this.tabs.unSendCount = data.unSendCount;
      });
    },
    // 切换详情
    changeTab(i) {},
    // 发放工资条
    payslip() {
      this.$request({
        url: "/hr/api/v1/salaryBills/listAllRelation",
        params: {
          companyId: this.hr.companyId,
          tableId: this.$route.query.tableId,
          sendStatus: 0,
          reloadCount: true
        }
      }).then(({ data }) => {
        this.$router.push({
          path: "/wages/add-payslip-sort/add-payslip-second",
          query: {
            unSendCount: this.tabs.unSendCount,
            ...this.$route.query
          }
        });
      });
    },
    // 查看统计
    statistics() {}
  }
};
</script>
<style lang="scss" scoped>
.payslip-detail {
  padding: 24px;
  .top {
    padding-left: 15px;
  }

  .act {
    border-bottom: 2px solid transparent;
    width: 120px;
    margin-right: 24px;
    line-height: 32px;
    text-align: center;
    cursor: default;
  }
  .current {
    border-color: var(--primary);
    color: var(--primary);
  }
  .right-top {
    flex: 1;
    text-align: right;
  }
  .pos {
    position: absolute;
    right: 24px;
    top: 50px;
  }
}
</style>
